<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郝珍华">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        .box {
            width: 500px;
            margin: 200px auto;
            /* border: 1px solid; */
            position: relative;
        }

        .datu {
            margin: 0;
            padding: 0;
            list-style: none;
            position: relative;
            height: 150px;
        }

        .datu li {
            position: absolute;
            display: none;
        }

        .datu li img {
            width: 500px;
            height: 300px;
        }

        .datu .current {
            display: block;
        }

        .baidian {
            position: absolute;

            width: 150px;
            height: 20px;

            display: flex;
            bottom: -120px;
            left: calc(50% - 75px);

            display: flex;
            justify-content: space-around;
            text-align: center;
        }

        .baidian>span {


            width: 20px;
            height: 20px;
            display: inline-block;
            background-color: gray;
            /* border:1px solid ; */
            border-radius: 100%;
            cursor: pointer;
        }

        .baidian .active {
            background-color: lightcoral;
        }

        .huadong span {
            position: absolute;
            border-radius: 5px;
            font-size: 20px;
            background-color: black;
            text-align: center;
            line-height: 60px;
            color: white;
            opacity: 0.3;
            cursor: pointer;
            width: 40px;
            height: 60px;
            display: none;
        }

        .prev {
            left: 0;
        }

        .next {
            right: 0;
        }
    </style>
</head>

<body>
    <script src="./jquery.js"></script>
    <div class="box">
        <ul class="datu">
            <li class="current"><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
        </ul>
        <div class="baidian">
            <span class="active">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <div class="huadong">

            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>

    </div>
</body>

</html>
<script>
    var box = $('.box')
    var datuLi = $('li')
    var baidian = $('.baidian span')
    var index = 0;
    function show() {
        datuLi.eq(index).addClass('current').siblings().removeClass('current');
        baidian.eq(index).addClass('active').siblings().removeClass('active');
    }
    // 定时器
    var timer = setInterval(next, 1000);
    // 下一张
    //图片来回切换，调用timer = setInterval(next, 1000);中的next 
    function next() {
        index = index == datuLi.length - 1 ? 0 : index + 1
        show()
    }
    // 鼠标进入白点时，白点跟着走变红，图片切换
    baidian.hover(function () {
        // 图片的索引值等于白点的索引值
        index = $(this).index();
        // 调用封装的show  让图片来回切换
        show()
        // console.log(index)
    })
    // 鼠标进入图片时，定时器关闭
    box.hover(function () {
        clearInterval(timer);
        // 清除定时器冲突
        timer = null;
        $('.huadong span').show();
    }, function () {
        // 鼠标出去时定时器开始
        timer = setInterval(next, 1000);
        $('.huadong span').hide();
    })
    //  鼠标点击上一张时调用prev()
    // 上一张
    function prev() {
        index = index == 0 ? datuLi.length - 1 : index - 1
        show()
    }
    $('.prev').click(function () {
        prev();
    })
    $('.next').click(function () {
        next();
    })

</script>